// Place all the styles related to the articles controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
html, body, div, ul, li, h1, h2, h3, h4, h5, h6{margin:0;padding:0;}
body{background-color:#F9F9F9;color:#555;font-family:"Lucida Grande",Verdana,'\u5fae\u8f6f\u96c5\u9ed1','Microsoft YaHei';font-size:12px;}
a:link{color:#21759B;outline:none;text-decoration:none;}
a:visited{color:#777777;}
a:hover{color:#D54E21;}
a:active{color:#555555;}
img{border:0;vertical-align:middle;}
textarea, input{outline:none;}

.center{border-top:2px solid #DDD; min-height:1000px;}
.wrapper{margin:0 auto;width:960px;}
.none{display:none;}

.main{float:left;margin:16px 0 50px;overflow:hidden;width:667px;}
.main>h2{margin-top:16px;}

.left{float:left;}
.right{float:right;}
.clear{background-color:transparent;border:0;clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden;}

.side{float:right;margin-bottom:50px;overflow:hidden;width:278px;}
.side>div{border-bottom:1px solid #DEDEDE;padding:10px 5px 15px;}
.side h4{font-size:14px;line-height:32px;}
.side ul{list-style:none;}
.side a{line-height:18px;}

#archiveSide{list-style:square outside none;margin-left:18px;}
#archiveSide .archive-year{color:#D54E21;font-weight:bold;height:18px;line-height:18px;list-style:none;}

#tags li{float:left;height:38px;list-style:none;}
#tags a:hover{text-shadow:0 0 2px;}
#tags a{border-radius:3px 3px 3px 3px;box-shadow:1px 1px 3px #555555;float:left;margin:3px 6px;padding:3px 12px;}
#tagsSide li a{float:left;line-height:20px;margin-right:7px;white-space:nowrap;}
.tags1{color:#A1A1A1;font-size:12px;}
.tags2{color:#687F95;font-size:14px;}
.tags3{color:#4C6E90;font-size:16px;}
.tags4{color:#258;font-size:18px;}
.tags5{font-size:20px;}
#tagsSide .tags2{font-size:14px;}
#tagsSide .tags3{font-size:16px;}
#tagsSide .tags4{font-size:18px;}
#tagsSide .tags5{font-size:20px;}

#search{background-color:#FFF;background-position:7px -99px;background-repeat:no-repeat;border:1px solid #DDD;border-radius:2px 2px 2px 2px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.1) inset;color:#888;float:right;font-size:14px;height:20px;line-height:20px;moz-transition:width 0.4s ease, background 0.4s ease;padding:3px 10px 3px 28px;transition:width 0.4s ease, background 0.4s ease;webkit-transition:width 0.4s ease, background 0.4s ease;width:24px;}
#search:focus{background-color:#F9F9F9;width:196px;}



.date-ico, .tag-ico, .user-ico, .expand-ico, .collapse-ico, #search,
.translate-ico, .feed-ico{background-image:url("icons.png");}
.feed-ico{background-position:right -146px;background-repeat:no-repeat;color:#555;padding-right:24px;}
.translate-ico{background-position:1px -125px;background-repeat:no-repeat;border:1px solid #999;border-radius:3px 3px 3px 3px;cursor:pointer;float:right;height:16px;margin:6px 0 0 18px;padding:1px;width:16px;}
.translate-ico:hover{background-color:#F2F2F2;border-color:#D54E21;box-shadow:0 0 1px #999;}
.expand-ico, .collapse-ico{background-position:54px -84px;background-repeat:no-repeat;cursor:pointer;height:16px;}
.collapse-ico{background-position:54px -69px;}
.date-ico, .tag-ico, .user-ico{background-repeat:no-repeat;display:block;height:16px;padding-left:20px;}
.tag-ico{margin:6px 6px 0 0;}
.date-ico{background-position:0 -16px;float:left;}
.user-ico{background-position:0 -32px;float:left;margin-left:12px;}


.recent-comments img{background-color:#FFF;border:1px solid #999;height:32px;margin-top:1px;padding:1px;width:32px;}
.recent-comments-main{float:left;margin:0 0 9px 3px;width:229px;}
.recent-comments-main .expand-ico, .recent-comments-main .collapse-ico{background-position:0 -86px;filter:alpha(opacity=0);float:right;moz-transition:opacity 400ms ease;opacity:0;transition:opacity 400ms ease;webkit-transition:opacity 400ms ease;width:16px;}
.recent-comments li:hover .expand-ico, .recent-comments li:hover .collapse-ico{filter:alpha(opacity=100);opacity:1;}
.recent-comments-main .collapse-ico{background-position:0 -70px;}
.recent-comments-content{height:18px;overflow:hidden;}

.article{border-bottom:1px solid #CCCCCC;margin-top:20px;padding:0 5px 10px;}
.article-element{font-size:11px;line-height:16px;margin:12px 0;}
.article-element a{border-bottom:1px solid #DFDFDF;color:#777777;padding-bottom:1px;text-decoration:none;}
.article-element a:hover{border-bottom-color:#D54E21;color:#D54E21;}
.article-title{color:#21759B;font-size:20px;font-weight:normal;}
.article-title:hover{color:#D54E21;}
.article .expand-ico, .article .collapse-ico{background-position:0 -86px;float:right;margin-top:9px;padding-right:6px;width:15px;}
.article .collapse-ico{background-position:0 -70px;}
.article-body{overflow:hidden;word-wrap:break-word;}
.article-body h1{font-size:2em;margin:.67em 0;}
.article-body h2{font-size:1.5em;margin:.75em 0;}
.article-body h3{font-size:1.17em;margin:.83em 0;}
.article-body h4{margin:1.12em 0;}
.article-body h4{font-size:.83em;margin:1.5em 0;}
.article-body h6{font-size:.75em;margin:1.67em 0;}
.article-body ol, .article-body ul{margin-left:40px;}
.article-body a{border-bottom:1px solid #DFDFDF;}
.article-body a:hover{border-bottom:1px solid #D54E21;color:#D54E21;}

.pagination{line-height:21px;margin-top:30px; clear: both;}
.pagination a{background-color:#F2F2F2;border:1px solid #C5C3C2;font-size:10px;margin:2px;padding:1px 5px;text-decoration:none;}
.pagination a.current{background-color:#FFF;color:#000;font-weight:bold;padding:2px 6px;}
.pagination a:hover{background-color:#F3DEDD;border:1px solid #D54E21;color:#D54E21;}

.apple_pagination { line-height:21px;margin-top:30px;text-align: center;padding:1em;cursor:default;}
.apple_pagination a, .apple_pagination span {padding: 0.2em 0.3em; }
.apple_pagination .disabled {color: #aaaaaa; }
.apple_pagination .current {font-style: normal;font-weight: bold;background-color: #bebebe;display:inline-block;width: 1.4em;height: 1.4em;line-height: 1.5;-moz-border-radius: 1em;-webkit-border-radius: 1em;border-radius: 1em;text-shadow: rgba(255, 255, 255, 0.8) 1px 1px 1px; }
.apple_pagination a {text-decoration: none;color: black; }
.apple_pagination a:hover, .apple_pagination a:focus {text-decoration: underline; }
